<template>
    <div>
        <a-table :columns="columns"
                 :data-source="roomTypeInfo"
                 :pagination="pagination"
                 :row-key="record => record.id">
            <span slot="type" slot-scope="text">
                <span  v-if="text=='DoubleBed'">
                    双床房
                </span>
                <span v-if="text=='BigBed'">
                    大床房
                </span>
                <span v-if="text=='Family'">
                    家庭房
                </span>
            </span>
            <span slot="action" slot-scope="record">
              <a @click="onClickManage(record.id)">管理</a>
              <a-divider type="vertical"/>
              <a @click="onModifyPrice(record.id)">修改价格</a>
            </span>
        </a-table>
        <room-manage-drawer :id="roomId"></room-manage-drawer>
        <modify-price-model :id="roomId" :hotelId="activeHotelId"></modify-price-model>
    </div>
</template>
<script>
    import {mapGetters, mapMutations,mapActions} from "vuex";
    import roomManageDrawer from "./roomManageDrawer";
    import modifyPriceModel from "./modifyPriceModel";

    const columns = [
        {
            title: '# 房型编号',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '房间类型',
            dataIndex: 'roomType',
            key: 'roomType',
            scopedSlots: {customRender: 'type'}
        },
        {
            title: '价格',
            dataIndex: 'price',
            key: 'price',
        },
        {
            title: '操作',
            key: 'action',
            scopedSlots: {customRender: 'action'},
        },
    ];

    export default {
        data() {
            return {
                roomId:'',
                priceVisible:false,
                columns,
                pagination: {
                    onChange: page => {
                        console.log(page);
                    },
                    pageSize: 5,
                },
            };
        },
        components: {
            modifyPriceModel,
            roomManageDrawer,
        },
        computed: {
            ...mapGetters([
                'roomManageDrawerVisible',
                'activeHotelId',
                'roomTypeInfo'
            ])
        },
        mounted() {
          this.getRoomTypeInfo(this.activeHotelId)
        },
        methods: {
            ...mapActions([
                'getRoomTypeInfo',
            ]),
            ...mapMutations([
                'set_priceVisible',
                'set_roomManageDrawerVisible',
                'set_roomTypeInfo',
                'set_activeRoomId',
                'set_searchedRoomRepoList'
            ]),
            onClickManage(id) {

                this.set_roomManageDrawerVisible(true)
                this.set_activeRoomId(id)
                this.roomId=id
                this.set_searchedRoomRepoList([])
            },
            onModifyPrice(id) {
                this.roomId = id;
                this.set_priceVisible(true)
            },
            handleOk(e){
                this.priceVisible=false
            },
            handleCancel(e){
                this.priceVisible=false
            }
        }
    };
</script>
